Ajax File Upload

  • STEPS

    in html

    
                    <input type='file' id="file" name='file' class="form-control">
    
                    <input type="button" id="submit" value='Submit' class='btn btn-success'>
    
    

    in script

    
    $('#submit').click(function(){
      var files = $('#file')[0].files;
    
      if(files.length > 0){
                         var fd = new FormData();
    
                         // Append data 
                         fd.append('file',files[0]);
                         fd.append('_token',CSRF_TOKEN);
    
                         // Hide alert 
                         $('#responseMsg').hide();
    
                         // AJAX request 
                         $.ajax({
                              url: "",
                              method: 'post',
                              data: fd,
                              contentType: false,
                              processData: false,
                              dataType: 'json',
                              success: function(response){
    
    
                              },
                              error: function(response){
    
                              }
                            });     
    
       }                        
    
    
    });
    

    OR

    
    
    <form action="" method="POST" id="file-upload" enctype="multipart/form-data">
                   
            
                    <div class="mb-3">
                        <label class="form-label" for="inputFile">Select File:</label>
                        <input 
                            type="file" 
                            name="file" 
                            id="inputFile"
                            class="form-control">
                        <span class="text-danger" id="file-input-error"></span>
                    </div>
             
                    <div class="mb-3">
                        <button type="submit" class="btn btn-success">Upload</button>
                    </div>
                
                </form>
    
    
    
    
    <script type="text/javascript">
    
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
      
        $('#file-upload').submit(function(e) {
            e.preventDefault();
            let formData = new FormData(this);
            $('#file-input-error').text('');
    
            $.ajax({
                type:'POST',
                url: "",
                data: formData,
                contentType: false,
                processData: false,
                success: (response) => {
                    if (response) {
                        this.reset();
                        alert('File has been uploaded successfully');
                    }
                },
                error: function(response){
                    $('#file-input-error').text(response.responseJSON.message);
                }
           });
        });
          
    </script>